<template>
    <div class="index">
      <div id="nav">
        {{status}}:<span v-show="state=='login'" class="switch" @click="switchstatus">switch&nbsp;&nbsp;</span>|
        <router-link @click="state0" to="/login">login</router-link>
      </div>
        <router-view></router-view>
    </div>
</template>

<script>
    import {mapState} from "vuex";

    export default {
        computed: {
            ...mapState(['status'])
        },
        data() {
            return {
                state:"login"
            }
        },
        methods:{
            switchstatus(){
                this.$store.commit('switchstatus')
            },
            state0:function () {
                this.state="login"
            },

        }
    }
</script>

<style scoped>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    #app {

        font-family: Avenir, Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
    }
    .index{
        position: absolute;
        width: 100vw;
        height: 100vh;
        background: url("/index.jpg")  ;
        background-size: cover;
    }

    #nav {
        width: 40vw;
        height: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 30px;
        margin: 0 auto;
    }

    #nav a {
        font-weight: bold;
        color: #2c3e50;
    }

    #nav a.router-link-exact-active {
        color: #42b983;
    }
    .switch{
        cursor: pointer;
    }
    .switch:hover{
        color: #42b983;;
    }
</style>
